<template>
  <div class='container'>
    <div class='left-box'>
      <!-- 数据更新趋势 -->
      <div class='sjgx-box'>
        <headTitle title='数据更新趋势' :icon-url='sjgxIcon'>
          <template slot='right'>
            <a-select
              v-model:value="year"
              style="width: 82px"
              :options="nfOptions"
              placeholder="请选择"
              @change="yearChange"
            >
              <template #suffixIcon>
                <a-icon type="caret-down" style='color: #3477FF'/>
              </template>
            </a-select>
          </template>
        </headTitle>
        <!-- 折线统计图 -->
        <div class='broken-line-static' ref='zxChart'></div>
        <!-- 条形统计图 -->
        <div class='strip-static' ref='txChart'></div>
      </div>
      <!-- 平台用户 -->
      <div class='ptyh-box'>
        <headTitle title='平台用户' :icon-url='ptyhIcon'></headTitle>
        <div class='ptyh-static-box'>
          <div class='static-row'>
            <div class='item'>
              <img :src='ptyhInfo.ptfwl.iconUrl' alt=''>
              <div class='r-box'>
                <div class='txt'>平台访问量</div>
                <div class='num'>{{ptyhInfo.ptfwl.count}}</div>
              </div>
            </div>
            <div class='item'>
              <img :src='ptyhInfo.rjfwl.iconUrl' alt=''>
              <div class='r-box'>
                <div class='txt'>日均访问量</div>
                <div class='num'>{{ptyhInfo.rjfwl.count}}</div>
              </div>
            </div>
          </div>
          <div class='static-row' style='margin-top: 66px'>
            <div class='item'>
              <img :src='ptyhInfo.zcyh.iconUrl' alt=''>
              <div class='r-box'>
                <div class='txt'>注册用户</div>
                <div class='num'>{{ptyhInfo.zcyh.count}}</div>
              </div>
            </div>
            <div class='item'>
              <img :src='ptyhInfo.rjhyyh.iconUrl' alt=''>
              <div class='r-box'>
                <div class='txt'>日均活跃用户</div>
                <div class='num'>{{ptyhInfo.rjhyyh.count}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class='right-box'>
      <!-- 统计部分 -->
<!--      <div class='top-static-box' >-->
<!--        <div class='row one' id='one'>-->
<!--          <div class='item left' @mouseenter='mouseenter(4)' @mouseleave='mouseleave(4)'>-->
<!--            <div class='item-icon'></div>-->
<!--            <div class='info-box'>-->
<!--              <div class='txt'>{{firstTypeData[0].name}}</div>-->
<!--              <div class='num'>{{firstTypeData[0].num}}</div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class='item right' @mouseenter='mouseenter(5)' @mouseleave='mouseleave(5)'>-->
<!--            <div class='item-icon'></div>-->
<!--            <div class='info-box'>-->
<!--              <div class='txt'>{{firstTypeData[9].name}}</div>-->
<!--              <div class='num'>{{firstTypeData[9].num}}</div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class='row two' id='two'>-->
<!--          <div class='item left' @mouseenter='mouseenter(3)' @mouseleave='mouseleave(3)'>-->
<!--            <div class='item-icon'></div>-->
<!--            <div class='info-box'>-->
<!--              <div class='txt'>{{firstTypeData[1].name}}</div>-->
<!--              <div class='num'>{{firstTypeData[1].num}}</div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class='item right' @mouseenter='mouseenter(6)' @mouseleave='mouseleave(6)'>-->
<!--            <div class='item-icon'></div>-->
<!--            <div class='info-box'>-->
<!--              <div class='txt'>{{firstTypeData[8].name}}</div>-->
<!--              <div class='num'>{{firstTypeData[8].num}}</div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class='row' id='three'>-->
<!--          <div class='item left' @mouseenter='mouseenter(2)' @mouseleave='mouseleave(2)'>-->
<!--            <div class='item-icon'></div>-->
<!--            <div class='info-box'>-->
<!--              <div class='txt'>{{firstTypeData[2].name}}</div>-->
<!--              <div class='num'>{{firstTypeData[2].num}}</div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class='item right' @mouseenter='mouseenter(7)' @mouseleave='mouseleave(7)'>-->
<!--            <div class='item-icon'></div>-->
<!--            <div class='info-box'>-->
<!--              <div class='txt'>{{firstTypeData[7].name}}</div>-->
<!--              <div class='num'>{{firstTypeData[7].num}}</div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class='row two' id='four'>-->
<!--          <div class='item left' @mouseenter='mouseenter(1)' @mouseleave='mouseleave(1)'>-->
<!--            <div class='item-icon'></div>-->
<!--            <div class='info-box'>-->
<!--              <div class='txt'>{{firstTypeData[3].name}}</div>-->
<!--              <div class='num'>{{firstTypeData[3].num}}</div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class='item right' @mouseenter='mouseenter(8)' @mouseleave='mouseleave(8)'>-->
<!--            <div class='item-icon'></div>-->
<!--            <div class='info-box'>-->
<!--              <div class='txt'>{{firstTypeData[6].name}}</div>-->
<!--              <div class='num'>{{firstTypeData[6].num}}</div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class='row one' style='margin-bottom: 0' id='five'>-->
<!--          <div class='item left' @mouseenter='mouseenter(0)' @mouseleave='mouseleave(0)'>-->
<!--            <div class='item-icon'></div>-->
<!--            <div class='info-box'>-->
<!--              <div class='txt'>{{firstTypeData[4].name}}</div>-->
<!--              <div class='num'>{{firstTypeData[4].num}}</div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class='item right' @mouseenter='mouseenter(9)' @mouseleave='mouseleave(9)'>-->
<!--            <div class='item-icon'></div>-->
<!--            <div class='info-box'>-->
<!--              <div class='txt'>{{firstTypeData[5].name}}</div>-->
<!--              <div class='num'>{{firstTypeData[5].num}}</div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class='circle-box'>-->
<!--          <div class='big-circle-box'>-->
<!--            <div class='big-circle'>-->
<!--              <div style="width: 210px;overflow: hidden">-->
<!--                <div class='z-num'>{{sjzl}}</div>-->
<!--                <div class='dw-txt'>数据总量(条)</div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
      <div class='top-static-box' >
        <div class='row one' id='one'>
          <div class='item left' @click='clickRightStaticBox(4)'>
            <div class='item-icon'></div>
            <div class='info-box'>
              <div class='txt'>{{firstTypeData[0].name}}</div>
              <div class='num'>{{firstTypeData[0].num}}</div>
            </div>
          </div>
          <div class='item right' @click='clickRightStaticBox(5)'>
            <div class='item-icon'></div>
            <div class='info-box'>
              <div class='txt'>{{firstTypeData[9].name}}</div>
              <div class='num'>{{firstTypeData[9].num}}</div>
            </div>
          </div>
        </div>
        <div class='row two' id='two'>
          <div class='item left' @click='clickRightStaticBox(3)'>
            <div class='item-icon'></div>
            <div class='info-box'>
              <div class='txt'>{{firstTypeData[1].name}}</div>
              <div class='num'>{{firstTypeData[1].num}}</div>
            </div>
          </div>
          <div class='item right' @click='clickRightStaticBox(6)'>
            <div class='item-icon'></div>
            <div class='info-box'>
              <div class='txt'>{{firstTypeData[8].name}}</div>
              <div class='num'>{{firstTypeData[8].num}}</div>
            </div>
          </div>
        </div>
        <div class='row' id='three'>
          <div class='item left' @click='clickRightStaticBox(2)'>
            <div class='item-icon'></div>
            <div class='info-box'>
              <div class='txt'>{{firstTypeData[2].name}}</div>
              <div class='num'>{{firstTypeData[2].num}}</div>
            </div>
          </div>
          <div class='item right' @click='clickRightStaticBox(7)'>
            <div class='item-icon'></div>
            <div class='info-box'>
              <div class='txt'>{{firstTypeData[7].name}}</div>
              <div class='num'>{{firstTypeData[7].num}}</div>
            </div>
          </div>
        </div>
        <div class='row two' id='four'>
          <div class='item left' @click='clickRightStaticBox(1)'>
            <div class='item-icon'></div>
            <div class='info-box'>
              <div class='txt'>{{firstTypeData[3].name}}</div>
              <div class='num'>{{firstTypeData[3].num}}</div>
            </div>
          </div>
          <div class='item right' @click='clickRightStaticBox(8)'>
            <div class='item-icon'></div>
            <div class='info-box'>
              <div class='txt'>{{firstTypeData[6].name}}</div>
              <div class='num'>{{firstTypeData[6].num}}</div>
            </div>
          </div>
        </div>
        <div class='row one' style='margin-bottom: 0' id='five'>
          <div class='item left' @click='clickRightStaticBox(0)'>
            <div class='item-icon'></div>
            <div class='info-box'>
              <div class='txt'>{{firstTypeData[4].name}}</div>
              <div class='num'>{{firstTypeData[4].num}}</div>
            </div>
          </div>
          <div class='item right' @click='clickRightStaticBox(9)'>
            <div class='item-icon'></div>
            <div class='info-box'>
              <div class='txt'>{{firstTypeData[5].name}}</div>
              <div class='num'>{{firstTypeData[5].num}}</div>
            </div>
          </div>
        </div>
        <div class='circle-box'>
          <div class='big-circle-box'>
            <div class='big-circle'>
              <img class="big-circle-bg" src="@/assets/img/index/big_circle.png" alt="">
              <div class="txt-wrap" style="width: 210px;overflow: hidden">
                <div class='z-num'>{{sjzl}}</div>
                <div class='dw-txt'>数据总量(条)</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 信息显示部分 -->
      <div class='show-info-box'>
        <div class='info-box'>
          <div class='top-box'>
            <div class='title-box'>
              <div class='ty-dot'></div>
              <div class='txt'>{{selectFirstTypeItem.name}}</div>
              <div class='ty-dot'></div>
            </div>
          </div>
          <div class='bottom-box'>
            <div class='b-item' v-for='(item,index) in rStaticDetailInfo' :key='index'>
              <div class='name'>{{item.name}}</div>
              <div class='num'>{{item.num}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headTitle from './components/headTitle'
import {
  getPtyhZcNum,
  getPtyhRjzxNum,
  getPtyhRjptfwNum,
  getPtyhPtfwNum,
  getZymlAddByYear,
  getDataAddByZyml,
  getDataAllCount,
  getSecondLevelData,
  getFirstLevelData
} from '@/api/dashboard/Analysis'
export default {
  name: 'index',
  components:{
    headTitle
  },
  watch:{
    startIndex(val,oldVal){
      // console.log('监听index',val,oldVal)
      this.addStaticBoxCss(val,oldVal)
    }
  },
  data(){
    return{
      sjgxIcon:require('@/assets/img/index/icon_qushi.png'),
      ptyhIcon:require('@/assets/img/index/icon_pingtaiyh.png'),
      //选择年份
      year:'2022',
      nfOptions:[
        {
          value: '2022',
          label: '2022年',
        },
        {
          value: '2011',
          label: '2021年',
        },
        {
          value: '2020',
          label: '2020年',
        }
      ],
      //折线统计图数据
      zxChartData:{},
      //条形统计图数据
      txChartData:{},
      //数据总量
      sjzl:'0',
      //平台用户信息数据
      ptyhInfo:{
        ptfwl:{
          iconUrl:require('@/assets/img/index/icon_pingtai.png'),
          count:''
        },
        rjfwl:{
          iconUrl:require('@/assets/img/index/icon_fangwen.png'),
          count:''
        },
        zcyh:{
          iconUrl:require('@/assets/img/index/icon_zhuce.png'),
          count:''
        },
        rjhyyh:{
          iconUrl:require('@/assets/img/index/icon_huoyue.png'),
          count:''
        }
      },
      //一级类型数据
      firstTypeData:[],
      //右侧统计详细信息
      rStaticDetailInfo:[],
      //定时器
      setInterval:null,
      //开始自动切换的下标
      startIndex : 0,
      //选中的一级类
      selectFirstTypeItem:{},
      //间隔时间（秒）
      speed : 2,
      //触发鼠标悬停事件
      timeOut:null,
      //触发移除鼠标事件
      levaeTimeOut:null,
    }
  },
  created() {
    this.getRightFirstData()
    this.getAllPtyhData()
    this.getSjZl()
  },
  mounted() {
    setTimeout(()=>{
      this.addStaticBoxCss(this.startIndex)
    },500)
    this.getChartData()
    // clearInterval(this.setInterval)
    // this.automaticWwitch()
  },
  destroyed() {
    clearInterval(this.setInterval)
    this.timer = null
  },
  methods:{
    //获取右侧一级分类数据
    getRightFirstData(){
      getFirstLevelData().then(res=>{
        // console.log('=============一级数据',res.result)
        this.firstTypeData = res.result
        this.clickRightStaticBox(this.startIndex)
      })
    },
    //获取右侧二级分类数据
    getRightSecondData(){
      getSecondLevelData({type:this.selectFirstTypeItem.type}).then(ress=>{
        this.rStaticDetailInfo = ress.result
        this.timeOut = null
      })
    },
    //返回对应二级type下标
    backSecondTypeIndex(index){
      var typeIndex = 0
      if(index < 5){
        typeIndex = Math.abs(index - 4)
      }else {
        typeIndex = Math.abs(index - 14)
      }
      return typeIndex
    },
    //获取数据总量
    getSjZl(){
      getDataAllCount().then(res=>{
        this.sjzl = res.result
      })
    },
    //年份selectchange事件
    yearChange(e){
      this.getChartData()
    },
    //获取2chart数据
    getChartData(){
      getZymlAddByYear({year:this.year}).then(res=>{
        this.zxChartData = res.result
        this.getBrokenLineChart()
      })
      getDataAddByZyml({year:this.year}).then(res=>{
        this.txChartData = res.result
        this.getStripChart()
      })
    },
    //获取平台用户数据
    getAllPtyhData(){
      getPtyhPtfwNum().then(res=>{
        this.ptyhInfo.ptfwl.count = res.result
      })
      getPtyhRjptfwNum().then(res=>{
        this.ptyhInfo.rjfwl.count = res.result
      })
      getPtyhRjzxNum().then(res=>{
        this.ptyhInfo.rjhyyh.count = res.result
      })
      getPtyhZcNum().then(res=>{
        this.ptyhInfo.zcyh.count = res.result
      })
    },
    //初始化折现统计图
    getBrokenLineChart(){
      const chart = this.$refs.zxChart
      const myChart = this.$echarts.init(chart)
      var option;
      option = {
        grid:{
          left:'20%',
        },
        xAxis: {
          type: 'category',
          data: this.zxChartData.name,
          axisLabel:{
            show:true,
            textStyle: {
              color: '#999',
              fontSize:'14'
            }
          },
          axisLine:{
            show:true,
            lineStyle:{
              color:'#E7E9EC',
            }
          },
          // 是否显示坐标轴刻度
          axisTick: {
            show: false
          },
        },
        yAxis: {
          type: 'value',
          axisLabel:{
            show:true,
            textStyle: {
              color: '#999',
              fontSize:'14'
            },
            formatter: '{value}条'
          },
          splitLine:{
            show:true,
            lineStyle:{
              color:'#E7E9EC',
            }
          },
          axisLine:{
            show:true,
            lineStyle:{
              color:'#E7E9EC',
            }
          },
          // 是否显示坐标轴刻度
          axisTick: {
            show: false
          },
        },
        tooltip:{
          show:true
        },
        series: [
          {
            data: this.zxChartData.num,
            type: 'line',
            itemStyle:{
              color: '#3477FF',
            },
            areaStyle: {
              normal: {
                color: {
                  type: 'linear',x: 0,y: 0,x2: 0,y2: 1,
                  colorStops: [
                    {
                      offset: 0, color: 'rgba(255,255,255,0)' // 0% 处的颜色
                    },
                    {
                      offset: 1, color: '#387DFE' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                },
              }
            },
            smooth: true,
          }
        ]
      };
      option && myChart.setOption(option);
    },
    //初始化条形统计图
    getStripChart(){
      const chart = this.$refs.txChart
      const myChart = this.$echarts.init(chart)
      var option;
      option = {
        grid:{
          left:'18%'
        },
        xAxis: {
          type: 'category',
          data: this.txChartData.name,
          axisLabel:{
            show:true,
            rotate:45,
            textStyle: {
              color: '#999',
              fontSize:'14'
            }
          },
          axisLine:{
            show:true,
            lineStyle:{
              color:'#E7E9EC',
            }
          },
          // 是否显示坐标轴刻度
          axisTick: {
            show: false
          },
        },
        yAxis: {
          type: 'value',
          axisLabel:{
            show:true,
            textStyle: {
              color: '#999',
              fontSize:'14',
            }
          },
          splitLine:{
            show:true,
            lineStyle:{
              color:'#E7E9EC',
            }
          },
          axisLine:{
            show:true,
            lineStyle:{
              color:'#E7E9EC',
            }
          },
          // 是否显示坐标轴刻度
          axisTick: {
            show: false
          },
        },
        tooltip:{
          show:true
        },
        series: [
          {
            data: this.txChartData.num,
            type: 'bar',
            barWidth:12,
            itemStyle:{
              color: '#3477FF',
            },
            areaStyle: {
              normal: {
                color: {
                  type: 'linear',x: 0,y: 0,x2: 0,y2: 1,
                  colorStops: [
                    {
                      offset: 0, color: '#70B0FF' // 0% 处的颜色
                    },
                    {
                      offset: 1, color: '#387DFE' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                },
              }
            },
            smooth: true,
          }
        ]
      };
      option && myChart.setOption(option);
    },
    //自动切换
    automaticWwitch(){
      var left_items = document.getElementsByClassName('item left')
      var right_items = document.getElementsByClassName('item right')
      this.setInterval = setInterval(()=>{
        //取绝对值找出对应操作dom的下标
        var switch_index = Math.abs(this.startIndex - 4)
        if(this.startIndex < 5){
          if(this.startIndex > 0){
            //手动删除class
            left_items[switch_index + 1].classList.remove('item-hover' , 'icon' + (this.startIndex - 1) + '-hover')
          }else {
            right_items[4].classList.remove('item-hover' , 'icon9-hover')
          }
          //手动添加class，模仿伪类
          left_items[switch_index].classList.add('item-hover' , 'icon' + this.startIndex + '-hover')
        }else {
          if(this.startIndex == 5){
            left_items[0].classList.remove('item-hover' , 'icon4-hover')
          }else {
            right_items[switch_index - 2].classList.remove('item-hover' , 'icon' + (this.startIndex - 1) + '-hover')
          }
          //手动添加class，模仿伪类
          right_items[switch_index - 1].classList.add('item-hover' , 'icon' + this.startIndex + '-hover')
        }
        this.startIndex++
        if(this.startIndex == 10){
          this.startIndex = 0
        }
      },this.speed * 1000)
    },
    //手动添加点击css
    addStaticBoxCss(index,delIndex){
      var left_items = document.getElementsByClassName('item left')
      var right_items = document.getElementsByClassName('item right')
      //取绝对值找出对应操作dom的下标
      var switch_index = Math.abs(index - 4)
      if(delIndex == 0 || delIndex){
        var del_switch_index = Math.abs(delIndex - 4)
        if(delIndex < 5){
          //手动删除class
          left_items[del_switch_index].classList.remove('item-hover' , 'icon' + delIndex + '-hover')
        }else {
          right_items[del_switch_index - 1].classList.remove('item-hover' , 'icon' + delIndex + '-hover')
        }
      }
      if(index < 5){
        //手动添加class，模仿伪类
        left_items[switch_index].classList.add('item-hover' , 'icon' + index + '-hover')
      }else {
        //手动添加class，模仿伪类
        right_items[switch_index - 1].classList.add('item-hover' , 'icon' + index + '-hover')
      }
    },
    //鼠标移入事件处理
    mouseenter(index){
      if(this.timeOut){
        clearTimeout(this.timeOut)
      }
      this.timeOut = setTimeout(()=>{
        clearInterval(this.setInterval)
        this.selectFirstTypeItem = this.firstTypeData[this.backSecondTypeIndex(index)]
        this.getRightSecondData()
      },1000)
    },
    //鼠标移出事件处理
    mouseleave(index){
      if(this.levaeTimeOut){
        clearTimeout(this.levaeTimeOut)
      }
      this.levaeTimeOut = setTimeout(()=>{
        this.automaticWwitch()
        this.levaeTimeOut = null
      },1000)
    },
    //点击右侧统计box
    clickRightStaticBox(boxIndex){
      this.startIndex = boxIndex
      this.selectFirstTypeItem = this.firstTypeData[this.backSecondTypeIndex(boxIndex)]
      this.getRightSecondData()
    },
  }
}
</script>

<style scoped lang='less'>
.container{
  width: 100%;
  padding: 24px 20px;
  display: flex;
  justify-content: space-between;
  height: 100% !important;
  .left-box{
    width: 512px;
    .sjgx-box{
      width: 100%;
      background: #FFFFFF;
      border-radius: 8px;
      .broken-line-static{
        width: 100%;
        height: 270px;
      }
      .strip-static{
        width: 100%;
        height: 320px;
      }
    }
    .ptyh-box{
      width: 100%;
      margin-top: 20px;
      background: #FFFFFF;
      border-radius: 8px;
      height: 276px;
      .ptyh-static-box{
        width: 100%;
        padding: 30px 50px;
        .static-row{
          width: 100%;
          display: flex;
          justify-content: space-between;
          .item{
            display: flex;
            img{
              width: 44px;
              height: 44px;
            }
            .r-box{
              margin-left: 10px;
              .txt{
                font-size: 14px;
                font-weight: 400;
                color: #68789D;
                line-height: 20px;
              }
              .num{
                margin-top: 3px;
                font-size: 18px;
                font-weight: bold;
                color: #222222;
                line-height: 21px;
              }
            }
          }
        }
      }
    }
  }
  .right-box{
    flex: 1;
    margin-left: 20px;
    background: #FFFFFF;
    border-radius: 8px;
    min-height: 938px;
    .top-static-box{
      width: 100%;
      padding: 30px 60px;
      position: relative;
      //overflow-x: auto;
      .row{
        display: flex;
        justify-content: space-between;
        margin-bottom: 38px;
        .item{
          width: 398px;
          //width: 30%;
          height: 84px;
          background: rgba(52,119,255,0.08);
          position: relative;
          cursor: pointer;
          display: flex;
          padding: 0 20px;
          //&:hover{
          //  background: #3477FF;
          //}
          //&:hover .info-box .txt{
          //  color: #fff;
          //}
          //&:hover .info-box .num{
          //  color: #fff;
          //}
          img{
            width: 60px;
            height: 60px;
            margin: 12px 0;
          }
          .item-icon{
            width: 60px;
            height: 60px;
            margin: 12px 0;
          }
          .info-box{
            height: 60px;
            margin: 12px 0;
            margin-left: 20px;
            .txt{
              font-size: 16px;
              font-weight: 500;
              color: #73848F;
              line-height: 22px;
            }
            .num{
              margin-top: 10px;
              font-size: 20px;
              font-weight: bold;
              color: #1B2C49;
              line-height: 24px;
            }
          }
        }
        .left{
          &:before{
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            left: 0;
            border-right: 26px solid transparent;
            border-top: 15px solid #fff;
          }
          &:after{
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            left: 0;
            bottom: 0;
            border-right: 26px solid transparent;
            border-bottom: 15px solid #fff;
          }
        }
        .right{
          flex-direction: row-reverse;
          .info-box{
            margin-right: 20px;
            text-align: right;
          }
          &:before{
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            right: 0;
            border-left: 26px solid transparent;
            border-top: 15px solid #fff;
          }
          &:after{
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            right: 0;
            bottom: 0;
            border-left: 26px solid transparent;
            border-bottom: 15px solid #fff;
          }
        }
      }
      .one{
        padding: 0 135px;
      }
      .two{
        padding: 0 75px;
      }
      #one .left .item-icon{
        background: url("~@/assets/img/index/icon_dizhen.png");
      }
      //#one .left:hover .item-icon{
      //  background: url("~@/assets/img/index/icon_zhizaiyinzi_s.png");
      //}
      #one .right .item-icon{
        background: url("~@/assets/img/index/icon_jichudili.png");
      }
      //#one .right:hover .item-icon{
      //  background: url("~@/assets/img/index/icon_jichudili_s.png");
      //}

      #two .left .item-icon{
        background: url("~@/assets/img/index/icon_chegnzaiti.png");
      }
      //#two .left:hover .item-icon{
      //  background: url("~@/assets/img/index/icon_chegnzaiti_s.png");
      //}
      #two .right .item-icon{
        background: url("~@/assets/img/index/icon_fangzhiquhua.png");
      }
      //#two .right:hover .item-icon{
      //  background: url("~@/assets/img/index/icon_fangzhiquhua_s.png");
      //}

      #three .left .item-icon{
        background: url("~@/assets/img/index/icon_yunzaihuanjing.png");
      }
      //#three .left:hover .item-icon{
      //  background: url("~@/assets/img/index/icon_yunzaihuanjing_s.png");
      //}
      #three .right .item-icon{
        background: url("~@/assets/img/index/icon_fengxianquhua.png");
      }
      //#three .right:hover .item-icon{
      //  background: url("~@/assets/img/index/icon_fengxianquhua_s.png");
      //}

      #four .left .item-icon{
        background: url("~@/assets/img/index/icon_lishizaiqing.png");
      }
      //#four .left:hover .item-icon{
      //  background: url("~@/assets/img/index/icon_lishizaiqing_s.png");
      //}
      #four .right .item-icon{
        background: url("~@/assets/img/index/icon_fengxianpinggu.png");
      }
      //#four .right:hover .item-icon{
      //  background: url("~@/assets/img/index/icon_fengxianpinggu_s.png");
      //}

      #five .left .item-icon{
        background: url("~@/assets/img/index/icon_jianzainengli.png");
      }
      //#five .left:hover .item-icon{
      //  background: url("~@/assets/img/index/icon_jianzainengli_s.png");
      //}
      #five .right .item-icon{
        background: url("~@/assets/img/index/icon_zhongdian.png");
      }
      //#five .right:hover .item-icon{
      //  background: url("~@/assets/img/index/icon_zhongdian_s.png");
      //}
      .circle-box{
        width: 100%;
        display: flex;
        justify-content: center;
        .big-circle-box{
          width: 510px;
          height: 510px;
          background: #fff;
          border-radius: 50%;
          position: absolute;
          top: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .big-circle{
          width: 443px;
          height: 443px;
          /* background: url("~@/assets/img/index/big_circle.png") no-repeat; */
          display: flex;
          align-items: center;
          justify-content: center;
          .big-circle-bg {
            position: absolute;
            left: 34px;
            top: 34px;
            animation: rotateSsz 15s linear infinite;
            display: block;
            width: 443px;
            height: 443px;
          }
          .txt-wrap{
            z-index: 1;
            .z-num{
              font-size: 36px;
              font-weight: bold;
              color: #FFFFFF;
              line-height: 42px;
              text-align: center;
              z-index: 1;
            }
            .dw-txt{
              margin-top: 16px;
              font-size: 16px;
              font-weight: 500;
              color: #FFFFFF;
              line-height: 22px;
              text-align: center;
            }
          }

        }
      }

    }
    .show-info-box{
      width: 100%;
      padding: 24px 64px;
      .info-box{
        width: 1112px;
        margin: 0 auto;
        min-height: 268px;
        border-radius: 4px;
        border: 6px solid rgba(52,119,255,0.1);
        .top-box{
          width: 100%;
          display: flex;
          justify-content: center;
          .title-box{
            padding: 0 40px;
            height: 31px;
            background: rgba(52,119,255,0.16);
            margin: 0 auto;
            display: flex;
            align-items: center;
            border-bottom-right-radius: 12px;
            border-bottom-left-radius: 12px;
            .ty-dot{
              width: 10px;
              height: 6px;
              background: #3477FF;
              border-radius: 45%;
            }
            .txt{
              font-size: 18px;
              font-weight: 500;
              color: #1B2C49;
              line-height: 25px;
              margin: 0 10px;
            }
          }
        }
        .bottom-box{
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          padding: 0 40px;
          padding-top: 16px;
          .b-item{
            width: 140px;
            margin-bottom: 20px;
            margin-right: 36px;
            .name{
              max-width: 100%;
              font-size: 16px;
              font-weight: 400;
              color: #73848F;
              line-height: 22px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .num{
              margin-top: 12px;
              max-width: 100%;
              font-size: 20px;
              font-weight: bold;
              color: #1B2C49;
              line-height: 24px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          :nth-child(6n){
            margin-right: 0;
          }
        }
      }
    }
  }
  //js手动添加的伪类
  .item-hover{
    background: #3477FF !important;
    .info-box{
      .txt{
        color: #fff !important;
      }
    }
    .info-box .num{
      color: #fff !important;
    }
  }
  .icon0-hover{
    .item-icon{
      background: url("~@/assets/img/index/icon_jianzainengli_s.png") !important;
    }
  }
  .icon1-hover{
    .item-icon{
      background: url("~@/assets/img/index/icon_lishizaiqing_s.png") !important;
    }
  }
  .icon2-hover{
    .item-icon{
      background: url("~@/assets/img/index/icon_yunzaihuanjing_s.png") !important;
    }
  }
  .icon3-hover{
    .item-icon{
      background: url("~@/assets/img/index/icon_chegnzaiti_s.png") !important;
    }
  }
  .icon4-hover{
    .item-icon{
      background: url("~@/assets/img/index/icon_zhizaiyinzi_s.png") !important;
    }
  }
  .icon5-hover{
    .item-icon{
      background: url("~@/assets/img/index/icon_jichudili_s.png") !important;
    }
  }
  .icon6-hover{
    .item-icon{
      background: url("~@/assets/img/index/icon_fangzhiquhua_s.png") !important;
    }
  }
  .icon7-hover{
    .item-icon{
      background: url("~@/assets/img/index/icon_fengxianquhua_s.png") !important;
    }
  }
  .icon8-hover{
    .item-icon{
      background: url("~@/assets/img/index/icon_fengxianpinggu_s.png") !important;
    }
  }
  .icon9-hover{
    .item-icon{
      background: url("~@/assets/img/index/icon_zhongdian_s.png") !important;
    }
  }
  @keyframes warn1 {
    0% {
      transform: scale(0.3);
      -webkit-transform: scale(0.3);
      opacity: 0.0;
    }
    25% {
      transform: scale(0.3);
      -webkit-transform: scale(0.3);
      opacity: 0.1;
    }
    50% {
      transform: scale(0.3);
      -webkit-transform: scale(0.3);
      opacity: 0.3;
    }
    75% {
      transform: scale(0.5);
      -webkit-transform: scale(0.5);
      opacity: 0.5;
    }
    100% {
      transform: scale(0.8);
      -webkit-transform: scale(0.8);
      opacity: 0.0;
    }
  }
}
@keyframes rotateSsz {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>